<template>
  <!-- 底部部分 => list有数据的时候，才展示  list.length > 0 -->
  <footer  class="footer" list.length > 0>
    <!-- 7:看还剩余几个没完成 -->
    <span class="todo-count"><strong>{{num}}</strong>剩余</span>
    <ul class="filters">
      <li>
        <!-- 10：给下标加高亮/selected是下标的高亮 接收status 点击加类名 
        利用class属性  第二个天添加点击事件，让status空值-->
        <a :class="{selected:status==='all'}" @click="$emit('status-event','all')" href="#/" >全部</a>
      </li>
      <li>
        <a :class="{selected:status==='done'}" @click="$emit('status-event','done')" href="#/active">进行中</a>
      </li>
      <li>
        <a :class="{selected:status==='undone'}" @click="$emit('status-event','undone')" href="#/completed">已完成</a>
      </li>
    </ul>
    <!-- 有已完成的任务，才需要显示这个按钮 -->
    <!-- 8:点击清空已经完成的 -->
    <button @click="$emit('clear-event')" class="clear-completed">清除已完成</button>
  </footer>
</template>

<script>
export default {
  // 7：子组件接收数据
  props:{
    list:{
      type:Array,
      required:true
    },
    // 10接收status
    status:{
      type:String,
      required:true,
      validator(value){
        return ['all','done','undone'].includes(value)
      }

    }
  },
  // 计算属性写在computed里面
 computed:{
    num(){
      return this.list.filter(item=>item.done === false).length
    }
  }
  
}
</script>

<style></style>
